<template>
    <div class="navigation_box">
        <img :src="adForm.thumbnail" class="navigation_img" />
        <span class="navigation_title">{{content.title}}</span>
        <div class="navigation_more">
            <span class="navigation_more_title">{{content.subTitle}}</span>
            <img src="http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/jxd/%E5%90%91%E5%8F%B3.png" class="navigation_more_icon" />
        </div>
    </div>
</template>
<script>
import { list } from "@/api/ad";
import { mapGetters } from "vuex";
import utils from "../../../../utils/utils.js";
export default {
    data() {
        return {
            pageNum: 1,
            pageSize: 1,
            adForm: {
                thumbnail: "http://cdn.rzico.com/img/banner_img.png",
            },
            tagIds: [],
        };
    },
    computed: {
        ...mapGetters(["mchId"]),
    },
    created() {
        this.loadAd();
    },
    props: ["content"],
    methods: {
        loadAd() {
            var _this = this;
            if (!utils.isNull(this.content.tagids)) {
                this.tagIds = this.content.tagids.split(",");
                for (var i = 0; i < _this.tagIds.length; i++) {
                    _this.tagIds[i] = parseInt(_this.tagIds[i]);
                }
            }
            let params = new URLSearchParams();
            params.append("pageNum", _this.pageNum);
            params.append("pageSize", _this.pageSize);
            params.append("mchId", this.mchId);
            for (var i = 0; i < _this.tagIds.length; i++) {
                params.append("tagIds", _this.tagIds[i]);
            }
            list(params)
                .then((response) => {
                    if (!utils.isNull(response.data.data)) {
                        if (utils.isNull(response.data.data[0].thumbnail)) {
                            response.data.data[0].thumbnail =
                                "http://cdnx.hulu.fj.cn/upload/20200629/rBD_P17oiuSAYl2RAAQj40EPdu8011.png";
                        } else {
                            response.data.data[0].thumbnail = utils.thumbnail(
                                response.data.data[0].thumbnail,
                                750,
                                124
                            );
                        }
                        // this.adForm = response.data.data[0];
                    }
                })
                .catch((error) => {
                    console.log("error!!");
                });
        },
    },
};
</script>
<style scoped>
.navigation_box {
    width: 355px;
    height: 52px;
    background-color: tomato;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    margin-left: 10px;
    margin-top: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.navigation_img {
    width: 375px;
    height: 62px;
    position: absolute;
    top: -6px;
    left: -5px;
}
.navigation_title {
    font-size: 16px;
    font-weight: 700;
    color: white;
    z-index: 1;
    width: 240px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.navigation_more {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.navigation_more_title {
    font-size: 18px;
    font-weight: 700;
    color: white;
    z-index: 1;
}

.navigation_more_icon {
    width: 14px;
    height: 14px;
    z-index: 1;
}
</style>